import { Button, Space } from "antd";
import React from "react";
import { useComponentStore } from "../../stores/components";


const Header: React.FC = () => {

  const { mode, setMode, setCurComponentId } = useComponentStore()

  return <div className="w-[100%] h-[60px] flex justify-between items-center px-[20px]">
    <div className="text-[#000] font-[600]">简易低代码编辑器</div>
    <Space>
      {
        mode === 'edit' && (
          <Button
            onClick={() => {
              setMode('preview')
              setCurComponentId(null)
            }}
            type="primary"
          >
            预览
          </Button>
        )
      }
      {
        mode === 'preview' && (
          <Button
          onClick={() => setMode('edit')}
          type="primary">
            退出预览
          </Button>
        )
      }
    </Space>
  </div>
}

export default Header